{% extends "base.html" %}

{% block title %}管理员仪表板 - 智能推荐系统{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- 页面标题 -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <h2 class="mb-0">
                    <i class="fas fa-tachometer-alt me-2"></i>管理员仪表板
                </h2>
                <div class="system-status">
                    <span class="health-indicator {{ 'health-online' if system_health == 'Online' else 'health-error' if 'Error' in system_health else 'health-initializing' }}"></span>
                    <span class="ms-2">{{ system_health }}</span>
                </div>
            </div>
        </div>
    </div>

    <!-- 系统统计卡片 -->
    <div class="row mb-4">
        <div class="col-lg-3 col-md-6 mb-3">
            <div class="card stat-card">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <div class="stat-value">{{ stats.total_users or 0 }}</div>
                            <div class="stat-label">总用户数</div>
                        </div>
                        <div class="stat-icon">
                            <i class="fas fa-users"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-3 col-md-6 mb-3">
            <div class="card stat-card">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <div class="stat-value">{{ stats.total_recommendations or 0 }}</div>
                            <div class="stat-label">推荐次数</div>
                        </div>
                        <div class="stat-icon">
                            <i class="fas fa-list"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-3 col-md-6 mb-3">
            <div class="card stat-card">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <div class="stat-value">{{ stats.total_interactions or 0 }}</div>
                            <div class="stat-label">用户交互</div>
                        </div>
                        <div class="stat-icon">
                            <i class="fas fa-mouse-pointer"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-3 col-md-6 mb-3">
            <div class="card stat-card">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <div class="stat-value">{{ stats.active_users_today or 0 }}</div>
                            <div class="stat-label">今日活跃</div>
                        </div>
                        <div class="stat-icon">
                            <i class="fas fa-chart-line"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 电影池分布 -->
    {% if stats.cold_start_movies is defined %}
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-layer-group me-2"></i>电影池分布
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row text-center">
                        <div class="col-md-2 col-6 mb-3">
                            <div class="pool-stat-admin">
                                <div class="pool-number text-info">{{ stats.cold_start_movies }}</div>
                                <div class="pool-label">冷启动池</div>
                            </div>
                        </div>
                        <div class="col-md-2 col-6 mb-3">
                            <div class="pool-stat-admin">
                                <div class="pool-number text-warning">{{ stats.test_movies }}</div>
                                <div class="pool-label">测试池</div>
                            </div>
                        </div>
                        <div class="col-md-2 col-6 mb-3">
                            <div class="pool-stat-admin">
                                <div class="pool-number text-success">{{ stats.growth_movies }}</div>
                                <div class="pool-label">成长池</div>
                            </div>
                        </div>
                        <div class="col-md-2 col-6 mb-3">
                            <div class="pool-stat-admin">
                                <div class="pool-number text-primary">{{ stats.mature_movies }}</div>
                                <div class="pool-label">成熟池</div>
                            </div>
                        </div>
                        <div class="col-md-2 col-6 mb-3">
                            <div class="pool-stat-admin">
                                <div class="pool-number text-danger">{{ stats.long_tail_movies }}</div>
                                <div class="pool-label">长尾池</div>
                            </div>
                        </div>
                        <div class="col-md-2 col-6 mb-3">
                            <div class="pool-stat-admin">
                                <div class="pool-number text-dark">{{ (stats.cold_start_movies + stats.test_movies + stats.growth_movies + stats.mature_movies + stats.long_tail_movies) }}</div>
                                <div class="pool-label">总计</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% endif %}

    <!-- 图表展示 -->
    <div class="row mb-4">
        <!-- 用户活跃度趋势 -->
        <div class="col-md-6 mb-4">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-chart-line me-2"></i>用户活跃度趋势
                    </h5>
                </div>
                <div class="card-body">
                    <div class="chart-container">
                        <canvas id="activityChart"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <!-- 推荐池分布 -->
        <div class="col-md-6 mb-4">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-chart-pie me-2"></i>推荐池分布
                    </h5>
                </div>
                <div class="card-body">
                    <div class="chart-container">
                        <canvas id="poolChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 推荐系统性能 -->
    {% if recommendation_stats %}
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-cogs me-2"></i>推荐系统性能指标
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-4 mb-3">
                            <h6 class="text-muted">平均每用户交互次数</h6>
                            <div class="h4 text-primary">{{ "%.1f"|format(recommendation_stats.avg_interactions_per_user) }}</div>
                        </div>
                        <div class="col-md-4 mb-3">
                            <h6 class="text-muted">用户类型分布</h6>
                            <div class="user-type-stats">
                                {% for user_type, count in recommendation_stats.user_type_distribution.items() %}
                                <div class="d-flex justify-content-between">
                                    <span>{{ user_type }}</span>
                                    <span class="text-primary">{{ count }}</span>
                                </div>
                                {% endfor %}
                            </div>
                        </div>
                        <div class="col-md-4 mb-3">
                            <h6 class="text-muted">推荐池使用情况</h6>
                            <div class="pool-usage-stats">
                                {% for pool, count in recommendation_stats.pool_distribution.items() %}
                                <div class="d-flex justify-content-between">
                                    <span>{{ pool }}</span>
                                    <span class="text-primary">{{ count }}</span>
                                </div>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% endif %}

    <!-- 最近系统指标 -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-database me-2"></i>最近系统指标
                    </h5>
                </div>
                <div class="card-body">
                    {% if metrics %}
                    <div class="table-responsive">
                        <table class="table table-sm">
                            <thead>
                                <tr>
                                    <th>指标名称</th>
                                    <th>数值</th>
                                    <th>时间</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for metric in metrics[:10] %}
                                <tr>
                                    <td>{{ metric.metric_name }}</td>
                                    <td>{{ "%.3f"|format(metric.metric_value) }}</td>
                                    <td>{{ metric.timestamp.strftime('%Y-%m-%d %H:%M') }}</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    {% else %}
                    <div class="text-center py-4">
                        <i class="fas fa-chart-bar fa-3x text-muted mb-3"></i>
                        <p class="text-muted">暂无系统指标数据</p>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>

<script>
$(document).ready(function() {
    // 创建图表
    {% if user_activity %}
    createUserActivityChart({{ user_activity|tojson }});
    {% endif %}

    {% if recommendation_stats.pool_distribution %}
    createPoolDistributionChart({{ recommendation_stats.pool_distribution|tojson }});
    {% endif %}
});
</script>
{% endblock %}